<template>
  <div class="public_body">
    <op-card class="public_card">
      <op-table-page-vir :tableColumn="tableColumn"></op-table-page-vir>
    </op-card>
  </div>
</template>
<script lang="tsx" setup>
import { ElButton } from 'element-plus';
const props = defineProps({});
const emit = defineEmits([]);
const init = () => {};
const tableColumn = [
  {
    key: `1`,
    prop: `menuName`,
    label: `Menu Name`,
    width: 550,
  },
  {
    key: `2`,
    prop: 'menuIcon',
    label: `Menu Icon`,
    width: 550,
  },
  {
    key: `3`,
    prop: 'id',
    label: `Id`,
    width: 550,
  },
  {
    key: `4`,
    prop: 'parentMenuId',
    label: `parentMenuId`,
    width: 550,
    component: 'textButton',
  },
  {
    key: `5`,
    prop: 'menuCode',
    label: `menuCode`,
    width: 550,
    cellRenderer: () => (
      <>
        <ElButton size='small'>Edit</ElButton>
        <ElButton size='small' type='danger'>
          Delete
        </ElButton>
      </>
    ),
    component: 'El-Button',
  },
];
</script>
<style lang="scss" scoped>
.public_body {
  height: 100vh;
  width: 100vw;
  padding: 15px;
  box-sizing: border-box;
  background-color: #f0f0f2;
}
.public_card {
  height: 100%;
  box-sizing: border-box;
}
</style>
